<template>
  <div class="main-page">
    <div class="page-title">
      <span>土地综合分析</span>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="9">
          <div class="module-left">
            <div class="land-supply-statistics h300">
              <div class="pubilc-chart-title">土地供应情况统计</div>
              <el-select class="land-supply-statistics-select" v-model="landSupplyStatisticsData.typeValue" size="small"
                         @change="changeLandSupplyStatisticsType">
                <el-option
                  v-for="item in landSupplyStatisticsListOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  class="custom-select-option"
                />
              </el-select>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.landSupplyStatistics" style="z-index: 1"
                                           @changeCity="(event) => changeCity(event, 'landSupplyStatistics')"></public-change-province-city>
              <div class="land-supply-statistics-btns">
                <el-tabs v-model="landSupplyStatisticsData.tabType"
                         @tab-change="changeLandSupplyStatisticsDataTab">
                  <el-tab-pane v-for="(item, index) of [
                          {
                            label: '供应面积',
                            value: 1
                          },
                          {
                            label: '成交价格',
                            value: 2
                          }
                      ]" :key="item.value"
                               :label="item.label"
                               :name="item.value"></el-tab-pane>
                </el-tabs>
              </div>
              <div v-if="landSupplyStatisticsData?.xAxisData?.length" style="position: relative">
                <line-bar-land-supply-statistics
                  ref="landSupplyStatisticsRef"
                  :line-bar-data="landSupplyStatisticsData"
                  class="h266"
                  @changeXAxisTimeType="landSupplyStatisticsData.xAxisTimeType = $event"
                  @click="fullSc('lineBarLandSupplyStatistics', landSupplyStatisticsData)"
                ></line-bar-land-supply-statistics>
              </div>
            </div>
            <div class="land-income h300">
              <div class="pubilc-chart-title">国有土地使用权出让收入情况</div>
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.landIncome"
                                           @changeCity="(event) => changeCity(event, 'landIncome')"></public-change-province-city>
              <div v-if="landIncomeData?.xAxisData?.length" style="position: relative">
                <line-bar-land-income
                  ref="landIncomeRef"
                  :line-bar-data="landIncomeData"
                  class="h256 chart"
                  @changeXAxisTimeType="landIncomeData.xAxisTimeType = $event"
                  @click="fullSc('lineBarLandIncome', landIncomeData)"
                ></line-bar-land-income>
              </div>
            </div>
            <div class="land-income-proportion-of-province h300">
              <div class="pubilc-chart-title">各城市国有土地使用权出让收入占全省比重变化情况</div>
              <div class="land-income-proportion-of-province-year-range">
                <div class="land-income-proportion-of-province-year-range-item">
                  <el-date-picker
                      popper-class="land-income-proportion-of-province-year-range-item-popper"
                      v-model="landIncomeProportionOfProvinceData.startYear"
                      type="year"
                      size="small"
                      placeholder="开始年份"
                      value-format="YYYY"
                      :clearable="false"
                      :disabled-date="startYearPickerOptions"
                      @change="submitFiltrateYear('start')"
                  />
                </div>
                <div style="margin: 0 2px">-</div>
                <div class="land-income-proportion-of-province-year-range-item">
                  <el-date-picker
                      popper-class="land-income-proportion-of-province-year-range-item-popper"
                      v-model="landIncomeProportionOfProvinceData.endYear"
                      type="year"
                      size="small"
                      placeholder="结束年份"
                      value-format="YYYY"
                      :clearable="false"
                      :disabled-date="endYearPickerOptions"
                      @change="submitFiltrateYear('end')"
                  />
                </div>
              </div>
              <div class="land-income-proportion-of-province-chart">
                <bar-superposition-province-proportion
                  v-if="landIncomeProportionOfProvinceData?.xAxisData?.length"
                  ref="landIncomeProportionOfProvinceRef"
                  :bar-data="landIncomeProportionOfProvinceData"
                  class="h266 chart"
                  @click="fullSc('barSuperpositionProvinceProportion', landIncomeProportionOfProvinceData)"
                ></bar-superposition-province-proportion>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" style="position: relative; padding: 0">
          <div class="middle-map">
            <map-box
              :listData="mapList"
              :mapConfig="{layoutSize: '140%', currentCity: cityObj.code}"
              @mapNameChange="mapNameChange"
            ></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
          </div>
          <div class="table-list">
            <div style="overflow-y: hidden; height: 100%">
              <table-list v-if="tablePolicyList?.length" :table-data="tablePolicyList" :loading="tablePolicyListLoading"
                          style="margin-bottom: 32px;"></table-list>
            </div>
          </div>
          <div class="residential-land-price-monitoring-analysis h242">
            <div class="pubilc-chart-title">住宅地价监测分析</div>
            <el-select class="residential-land-price-monitoring-analysis-select" v-model="landPriceMonitoringAnalysisData.typeValue" size="small"
                       @change="changeLandPriceMonitoringAnalysisType">
              <el-option
                v-for="item in landPriceMonitoringAnalysisListOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="custom-select-option"
              />
            </el-select>
            <public-change-province-city :cityList="mapList" :currentCity="cityConfig.landPriceMonitoringAnalysis"
                                         @changeCity="(event) => changeCity(event, 'landPriceMonitoringAnalysis')"></public-change-province-city>
            <div v-if="landPriceMonitoringAnalysisData?.xAxisData?.length" style="position: relative">
              <div class="residential-land-price-monitoring-analysis-chart">
                <line-bar-land-price-monitoring-analysis
                  ref="landPriceMonitoringAnalysisRef" :line-bar-data="landPriceMonitoringAnalysisData"
                  class="h218 chart"
                  @changeXAxisTimeType="landPriceMonitoringAnalysisData.xAxisTimeType = $event"
                  @click="fullSc('lineBarLandPriceMonitoringAnalysis', landPriceMonitoringAnalysisData)"
                ></line-bar-land-price-monitoring-analysis>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="land-transaction-condition h300">
            <div class="pubilc-chart-title">各类型土地成交情况分析</div>
            <public-change-province-city :cityList="mapList" :currentCity="cityConfig.landTransactionCondition"
                                         @changeCity="(event) => changeCity(event, 'landTransactionCondition')"></public-change-province-city>
            <div v-if="landTransactionConditionData?.xAxisData?.length" style="position: relative">
              <bar-superposition
                ref="landTransactionConditionRef"
                :bar-data="landTransactionConditionData"
                class="h256 chart"
                @changeXAxisTimeType="landTransactionConditionData.xAxisTimeType = $event"
                @click="fullSc('barSuperposition', landTransactionConditionData, 'landTransactionCondition')"
              ></bar-superposition>
            </div>
          </div>
          <div class="residential-land-abnormal-transaction-condition h300">
            <div class="pubilc-chart-title">住宅用地异常交易情况</div>
            <div class="residential-land-abnormal-transaction-condition-filtrate">
              <public-change-province-city :cityList="mapList" :currentCity="cityConfig.residentiaLandAbnormalTransactionCondition"
                                           @changeCity="(event) => changeCity(event, 'residentiaLandAbnormalTransactionCondition')"></public-change-province-city>
              <time-filtrate-public :isAreaSelectShow="false" @changeFiltrateTime="residentiaLandAbnormalTransactionConditionChangeFiltrateTime"></time-filtrate-public>
            </div>
            <div class="residential-land-abnormal-transaction-condition-chart">
              <pie
                v-if="residentiaLandAbnormalTransactionData?.leftSeriesData?.length"
                ref="leftResidentiaLandAbnormalTransactionRef"
                :pie-data="{...residentiaLandAbnormalTransactionData, seriesData: residentiaLandAbnormalTransactionData.leftSeriesData}"
                class="h276 chart"
                @click="fullSc('pie', {...residentiaLandAbnormalTransactionData, seriesData: residentiaLandAbnormalTransactionData.leftSeriesData})"
              ></pie>
              <pie
                v-if="residentiaLandAbnormalTransactionData?.rightSeriesData?.length"
                ref="rightResidentiaLandAbnormalTransactionRef"
                :pie-data="{...residentiaLandAbnormalTransactionData, seriesData: residentiaLandAbnormalTransactionData.rightSeriesData}"
                class="h276 chart"
                @click="fullSc('pie', {...residentiaLandAbnormalTransactionData, seriesData: residentiaLandAbnormalTransactionData.rightSeriesData})"
              ></pie>
            </div>
          </div>
          <div class="land-financial-analysis h300">
            <div class="pubilc-chart-title">土地金融分析</div>
            <public-change-province-city :cityList="mapList" :currentCity="cityConfig.landFinancialAnalysis"
                                         @changeCity="(event) => changeCity(event, 'landFinancialAnalysis')"></public-change-province-city>
            <div v-if="landFinancialAnalysisData?.xAxisData?.length" style="position: relative">
              <bar-superposition
                ref="landFinancialAnalysisRef"
                :bar-data="landFinancialAnalysisData"
                class="h256 chart"
                @changeXAxisTimeType="landFinancialAnalysisData.xAxisTimeType = $event"
                @click="fullSc('barSuperposition', landFinancialAnalysisData, 'landFinancialAnalysis')"
              ></bar-superposition>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
          v-if="magnifyData.dialogVisible"
          ref="dialogRef"
          :is="magnifyData.componentName"
          :dialogData="{fontSizeTimes: 2}"
          v-bind="{...magnifyData.props}"
          @dialogEmit="dialogEmit"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import lineBarLandSupplyStatistics from "@/components/landComprehensiveAnalysis/lineBarLandSupplyStatistics.vue";
import lineBarLandIncome from "@/components/landComprehensiveAnalysis/lineBarLandIncome.vue";
import barSuperpositionProvinceProportion from "@/components/landComprehensiveAnalysis/barSuperpositionProvinceProportion.vue";
import lineBarLandPriceMonitoringAnalysis from "@/components/landComprehensiveAnalysis/lineBarLandPriceMonitoringAnalysis.vue";
import barSuperposition from "@/components/landComprehensiveAnalysis/barSuperposition.vue";
import pie from "@/components/landComprehensiveAnalysis/pie.vue";

export default {
  components: {
    lineBarLandSupplyStatistics,
    lineBarLandIncome,
    barSuperpositionProvinceProportion,
    lineBarLandPriceMonitoringAnalysis,
    barSuperposition,
    pie,
  }
}
</script>

<script setup>
import {onMounted, ref, watch, nextTick, onBeforeMount} from 'vue'

import {
  getProMonitoringAnalyzeLandSupply, // 土地供应情况统计
  getProMonitoringCalculateLandRevenue, // 公共预算收入统计/土地使用权出让收入
  getProMonitoringAnalyzeLandDeals, // 各类型土地成交情况分析
  getProMonitoringLandFinancialData, // 土地金融分析
  getProMonitoringResidentialPrice, // 住宅地价监测分析
  getProMonitoringDetectAnomalies, // 住宅用地异常交易情况
  getProMonitoringLandRevenueShare, // 各城市国有土地使用权出让收入占全省比重变化情况
  getProMonitoringLandPolicyList, // 土地政策列表
} from "@/api/landComprehensiveAnalysis/index";

import publicChangeProvinceCity from "@/components/projectMonitoringAnalysis/publicChangeProvinceCity.vue";
import mapBox from "@/components/projectMonitoringAnalysis/map.vue";
import tableList from "@/components/housePropertyAnalysis/statistics/tableList.vue";
import timeFiltratePublic from "@/components/housePropertyAnalysis/timeFiltratePublic.vue";

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: '',
  moduleName: ''
})
const dialogRef = ref(null) // chart图放大-domref

const currentYear = ref(null); // 当前年份
const cityObj = ref({
  name: '',
  code: ''
}) // 地图-城市code信息
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: {disabled: false}, selected: false},
  {name: '大连市', value: 0, code: '210200', select: {disabled: false}, selected: false},
  {name: '鞍山市', value: 0, code: '210300', select: {disabled: false}, selected: false},
  {name: '抚顺市', value: 0, code: '210400', select: {disabled: false}, selected: false},
  {name: '本溪市', value: 0, code: '210500', select: {disabled: false}, selected: false},
  {name: '丹东市', value: 0, code: '210600', select: {disabled: false}, selected: false},
  {name: '锦州市', value: 0, code: '210700', select: {disabled: false}, selected: false},
  {name: '营口市', value: 0, code: '210800', select: {disabled: false}, selected: false},
  {name: '阜新市', value: 0, code: '210900', select: {disabled: false}, selected: false},
  {name: '辽阳市', value: 0, code: '211000', select: {disabled: false}, selected: false},
  {name: '盘锦市', value: 0, code: '211100', select: {disabled: false}, selected: false},
  {name: '铁岭市', value: 0, code: '211200', select: {disabled: false}, selected: false},
  {name: '朝阳市', value: 0, code: '211300', select: {disabled: false}, selected: false},
  {name: '葫芦岛市', value: 0, code: '211400', select: {disabled: false}, selected: false},
])

const cityConfig = ref({ // 模块顶部城市筛选
  landSupplyStatistics: cityObj.value.code, // 土地供应情况统计-city
  landIncome: cityObj.value.code, // 国有土地使用权出让收入情况-city
  landPriceMonitoringAnalysis: cityObj.value.code, // 住宅地价监测分析-city
  landTransactionCondition: cityObj.value.code, // 各类型土地成交情况分析-city
  residentiaLandAbnormalTransactionCondition: cityObj.value.code, // 住宅用地异常交易情况-city
  landFinancialAnalysis: cityObj.value.code, // 土地金融分析-city
})

const landSupplyStatisticsData = ref({ // 土地供应情况统计-data
  tabType: 1, // 供应面积
  dateType: 2, // 按年
  legendData: {},
  xAxisData: [],
  barData: [],
  lineData: [],
  yAxisLeftLabel: '',
  xAxisTimeType: 'year',
  moduleName: 'landSupplyStatistics',
  yAxisDefaultMaxValue: '28000000',
  typeValue: 1
})
const landSupplyStatisticsRef = ref(null) // 土地供应情况统计-domref
watch( // 土地供应情况统计-监听x轴年月切换
    () => landSupplyStatisticsData.value.xAxisTimeType,
    (newVal) => {
      getLandSupplyStatistics()
    }
)
const landSupplyStatisticsListOption = ref([ // 土地供应情况统计-select-list
  {
    label: '土地供应面积',
    value: 1
  },
  {
    label: '土地出让金',
    value: 2,
    fakeGymjList: [300000, 23000000, 20000000],
    fakeGymjTbList: [0, 4000.91, 2000],
  },
  {
    label: '成交价格',
    value: 3,
    fakeGymjList: [400000, 2300000, 2000000],
    fakeGymjTbList: [0, 3000.91, 3000],
  },
  {
    label: '土地用途',
    value: 4,
    fakeGymjList: [500000, 15000000, 200000],
    fakeGymjTbList: [0, 2000.91, 1000],
  },
  {
    label: '土地成交量',
    value: 5,
    fakeGymjList: [600000, 30000000, 60000000],
    fakeGymjTbList: [0, 1000.91, 500],
  },
  {
    label: '土地供应周期',
    value: 6,
    fakeGymjList: [700000, 10000000, 30000000],
    fakeGymjTbList: [0, 500.91, 4000],
  },
])

const landIncomeData = ref({ // 国有土地使用权出让收入情况-data
  xAxisData: [],
  barData: [],
  lineData: [],
  xAxisTimeType: 'year',
  moduleName: 'landIncome',
  yAxisDefaultMaxValue: '10000000'
})
const landIncomeRef = ref(null) // 国有土地使用权出让收入情况-domref
watch( // 国有土地使用权出让收入情况-监听x轴年月切换
    () => landIncomeData.value.xAxisTimeType,
    (newVal) => {
      getLandIncome()
    }
)

const landIncomeProportionOfProvinceData = ref({ // 各城市国有土地使用权出让收入占全省比重变化情况-data
  xAxisData: [],
  legendData: [],
  barData: [],
  startYear: '',
  endYear: ''
})
const landIncomeProportionOfProvinceRef = ref(null) // 各城市国有土地使用权出让收入占全省比重变化情况-domref

const tablePolicyList = ref([]) // 政策table列表
const tablePolicyListLoading = ref(false) // 政策table列表-loading

const landTransactionConditionData = ref({ // 各类型土地成交情况分析-data
  legendData: [['住宅', '商业', '工业', '综合'], ['#1f6ea2', '#ef968e', '#7fd1f5', '#ea7f8c']],
  xAxisData: [],
  barData: [],
  xAxisTimeType: 'year',
  yAxisLeftLabel: '成交金额(万元)',
  moduleName: 'landTransactionCondition',
  yAxisDefaultMaxValue: '10000000'
})
const landTransactionConditionRef = ref(null) // 各类型土地成交情况分析-domref
watch( // 各类型土地成交情况分析-监听x轴年月切换
    () => landTransactionConditionData.value.xAxisTimeType,
    (newVal) => {
      getLandTransactionCondition()
    }
)

const landPriceMonitoringAnalysisData = ref({ // 住宅地价监测分析-data
  legendData: [],
  xAxisData: [],
  barData: [],
  lineData: [],
  xAxisTimeType: 'year',
  moduleName: 'landPriceMonitoringAnalysis',
  typeValue: 1
})
const landPriceMonitoringAnalysisRef = ref(null) // 住宅地价监测分析-domref
watch( // 住宅地价监测分析-监听x轴年月切换
    () => landPriceMonitoringAnalysisData.value.xAxisTimeType,
    (newVal) => {
      getLandPriceMonitoringAnalysis()
    }
)
const landPriceMonitoringAnalysisListOption = ref([ // 住宅地价监测分析-select-list
  {
    label: '土地供应指标',
    value: 1
  },
  {
    label: '土地供应的异常分析',
    value: 2
  },
  {
    label: '土地供应状况分析',
    value: 3
  },
  {
    label: '土地价值评估分析',
    value: 4
  },
  {
    label: '土地动态监测分析',
    value: 5
  },
  {
    label: '地价动态监测分析',
    value: 6
  },
  {
    label: '土地政策分析',
    value: 7
  },
  {
    label: '土地金融分析',
    value: 8
  },
  {
    label: '住房用地异常交易分析',
    value: 9
  },
])

const landFinancialAnalysisData = ref({ // 土地金融分析-data
  legendData: [['土地抵押', '土地金融', '土地证券化'], ['#1f6ea2', '#ef968e', '#7fd1f5']],
  xAxisData: [],
  barData: [],
  xAxisTimeType: 'year',
  yAxisLeftLabel: '面积(万㎡)',
  moduleName: 'landFinancialAnalysis',
  yAxisDefaultMaxValue: '1000'
})
const landFinancialAnalysisRef = ref(null) // 土地金融分析-domref
watch( // 土地金融分析-监听x轴年月切换
    () => landFinancialAnalysisData.value.xAxisTimeType,
    (newVal) => {
      getLandFinancialAnalysis()
    }
)

const residentiaLandAbnormalTransactionData = ref({ // 住宅用地异常交易情况-data
  leftSeriesData: [],
  rightSeriesData: [],
  type: 2,
  startTime: '',
  endTime: ''
})
const leftResidentiaLandAbnormalTransactionRef = ref(null) // 住宅用地异常交易情况-domref-left
const rightResidentiaLandAbnormalTransactionRef = ref(null) // 住宅用地异常交易情况-domref-right

const getLandSupplyStatistics = (cityCode = cityObj.value.code) => { // 土地供应情况统计-getdata
  getProMonitoringAnalyzeLandSupply({
    adcode: cityCode,
    requestType: landSupplyStatisticsData.value.tabType,
    dateType: landSupplyStatisticsData.value.xAxisTimeType === 'month' ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      landSupplyStatisticsData.value.xAxisData = [0, ...resData?.dateList]
      landSupplyStatisticsData.value.legendData = {
        name: landSupplyStatisticsData.value.tabType === 1 ? '供应面积' : '成交价格',
        itemStyle: {
          color: '#2bd6d8'
        }
      }
      landSupplyStatisticsData.value.yAxisLeftLabel = landSupplyStatisticsData.value.tabType === 1 ? '面积(万㎡)' : '价格(元)'
      if (landSupplyStatisticsData.value.typeValue !== 1) {
        const tempObj = landSupplyStatisticsListOption.value.find(x => x.value === landSupplyStatisticsData.value.typeValue)
        landSupplyStatisticsData.value.barData = [0, ...tempObj?.fakeGymjList]
        landSupplyStatisticsData.value.lineData = [0, ...tempObj?.fakeGymjTbList]
      } else {
        landSupplyStatisticsData.value.barData = [0, ...resData?.gymjList]
        landSupplyStatisticsData.value.lineData = [0, ...resData?.gymjTbList]
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (landSupplyStatisticsData.value.xAxisData?.length) landSupplyStatisticsRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineBarLandSupplyStatistics') {
      dialogRef.value.updateChart();
    }
  })
}

const getLandIncome = (cityCode = cityObj.value.code) => { // 国有土地使用权出让收入情况-getdata
  getProMonitoringCalculateLandRevenue({
    adcode: cityCode,
    dateType: landIncomeData.value.xAxisTimeType === 'month' ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      landIncomeData.value.barData = []
      landIncomeData.value.xAxisData = [0, ...resData?.dateList]
      landIncomeData.value.barData.push([0, ...resData?.yssrList])
      landIncomeData.value.barData.push([0, ...resData?.crsrList])
      landIncomeData.value.lineData = [0, ...resData?.zbList]
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (landIncomeData.value.xAxisData?.length) landIncomeRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineBarLandIncome') {
      dialogRef.value.updateChart();
    }
  })
}

const getLandPriceMonitoringAnalysis = (cityCode = cityObj.value.code) => { // 住宅地价监测分析-getdata
  const yearMonthType = landPriceMonitoringAnalysisData.value.xAxisTimeType === 'month'
  getProMonitoringResidentialPrice({
    adcode: cityCode,
    dateType: yearMonthType ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    landPriceMonitoringAnalysisData.value.legendData = []
    landPriceMonitoringAnalysisData.value.xAxisData = []
    landPriceMonitoringAnalysisData.value.barData = [0]
    landPriceMonitoringAnalysisData.value.lineData = !yearMonthType ? [[0]] : [[0], [0]]
    if (resData?.dateList?.length) {
      landPriceMonitoringAnalysisData.value.legendData = ['住宅地价', '同比增长率']
      landPriceMonitoringAnalysisData.value.xAxisData = [0, ...resData?.dateList]
      if (yearMonthType) {
        landPriceMonitoringAnalysisData.value.legendData.push('环比增长率')
      }
      resData?.entryList?.forEach(x => {
        landPriceMonitoringAnalysisData.value.barData.push((x.zzdj + landPriceMonitoringAnalysisData.value.typeValue * 2000).toFixed(2))
        landPriceMonitoringAnalysisData.value.lineData[0].push((x.tb + landPriceMonitoringAnalysisData.value.typeValue * 0.1).toFixed(2))
        if (yearMonthType) {
          landPriceMonitoringAnalysisData.value.lineData[1].push((x.hb + landPriceMonitoringAnalysisData.value.typeValue * 0.2).toFixed(2))
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (landPriceMonitoringAnalysisData.value.xAxisData?.length) landPriceMonitoringAnalysisRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineBarLandPriceMonitoringAnalysis') {
      dialogRef.value.updateChart();
    }
  })
}

const initLandIncomeProportionOfProvince = () => { // 各城市国有土地使用权出让收入占全省比重变化情况-getdata
  getProMonitoringLandRevenueShare({
    startTime: landIncomeProportionOfProvinceData.value.startYear,
    endTime: landIncomeProportionOfProvinceData.value.endYear
  }).then(res => {
    const resData = res?.data
    landIncomeProportionOfProvinceData.value.xAxisData = []
    landIncomeProportionOfProvinceData.value.barData = []
    if (resData?.dateList?.length) {
      landIncomeProportionOfProvinceData.value.xAxisData = resData?.dateList
      landIncomeProportionOfProvinceData.value.legendData = ['沈阳市', '大连市', '鞍山市', '抚顺市', '本溪市', '丹东市', '锦州市', '营口市', '阜新市', '辽阳市', '铁岭市', '朝阳市', '盘锦市', '葫芦岛市']
      landIncomeProportionOfProvinceData.value.legendData.forEach(x => {
        const code = mapList.value?.find(y => y.name === x)?.code
        landIncomeProportionOfProvinceData.value.barData.push(resData?.[`list${code}`])
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    landIncomeProportionOfProvinceRef.value.updateChart()
  })
}

const initPolicyList = () => { // 政策列表-getdata
  tablePolicyListLoading.value = true
  getProMonitoringLandPolicyList().then(res => {
    if (res.data?.length) tablePolicyList.value = res.data
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    tablePolicyListLoading.value = false
  })
}

const getLandTransactionCondition = (cityCode = cityObj.value.code) => { // 各类型土地成交情况分析-getdata
  getProMonitoringAnalyzeLandDeals({
    adcode: cityCode,
    dateType: landTransactionConditionData.value.xAxisTimeType === 'month' ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      landTransactionConditionData.value.barData = []
      landTransactionConditionData.value.xAxisData = resData?.dateList
      landTransactionConditionData.value.barData.push(resData?.zzydList)
      landTransactionConditionData.value.barData.push(resData?.syydList)
      landTransactionConditionData.value.barData.push(resData?.gyydList)
      landTransactionConditionData.value.barData.push(resData?.zhydList)
    } else {
      landTransactionConditionData.value.xAxisData = []
      landTransactionConditionData.value.barData = []
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (landTransactionConditionData.value.xAxisData?.length) landTransactionConditionRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'landTransactionCondition') {
      dialogRef.value.updateChart();
    }
  })
}

const getResidentiaLandAbnormalTransactionCondition = (cityCode = cityObj.value.code) => { // 住宅用地异常交易情况-getdata
  getProMonitoringDetectAnomalies({
    adcode: cityCode,
    dateType: residentiaLandAbnormalTransactionData.value.type,
    startTime: residentiaLandAbnormalTransactionData.value.startTime,
    endTime: residentiaLandAbnormalTransactionData.value.endTime,
  }).then(res => {
    const resData = res?.data
    if (resData?.leftEntity) {
      const tempLeftEntityObj = resData?.leftEntity
      const tempRightEntityObj = resData?.rightEntity
      residentiaLandAbnormalTransactionData.value.leftSeriesData = ['异常交易量', '正常交易量']?.map((x, i) => {
        return {
          name: x,
          value: i === 0 ? tempLeftEntityObj?.ycjylEntry?.jyl : tempLeftEntityObj?.zcjylEntry?.jyl,
          tb: i === 0 ? tempLeftEntityObj?.ycjylEntry?.tb : tempLeftEntityObj?.zcjylEntry?.tb,
          hb: i === 0 ? tempLeftEntityObj?.ycjylEntry?.hb : tempLeftEntityObj?.zcjylEntry?.hb,
        }
      })
      residentiaLandAbnormalTransactionData.value.rightSeriesData = ['单价创新高', '总价创新高', '溢价率超50%']?.map((x, i) => {
        return {
          name: x,
          value: i === 0 ? tempRightEntityObj?.djEntry?.jyl : (i === 1 ? tempRightEntityObj?.zjEntry?.jyl : tempRightEntityObj?.yjEntry?.jyl),
          tb: i === 0 ? tempRightEntityObj?.djEntry?.tb : (i === 1 ? tempRightEntityObj?.zjEntry?.tb : tempRightEntityObj?.yjEntry?.tb),
          hb: i === 0 ? tempRightEntityObj?.djEntry?.hb : (i === 1 ? tempRightEntityObj?.zjEntry?.hb : tempRightEntityObj?.yjEntry?.hb),
        }
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    nextTick(() => {
      if (residentiaLandAbnormalTransactionData.value.leftSeriesData?.length) {
        leftResidentiaLandAbnormalTransactionRef.value.updateChart()
        rightResidentiaLandAbnormalTransactionRef.value.updateChart()
      }
    })
  })
}
const getLandFinancialAnalysis = (cityCode = cityObj.value.code) => { // 土地金融分析-getdata
  getProMonitoringLandFinancialData({
    adcode: cityCode,
    dateType: landFinancialAnalysisData.value.xAxisTimeType === 'month' ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      landFinancialAnalysisData.value.barData = []
      landFinancialAnalysisData.value.xAxisData = resData?.dateList
      landFinancialAnalysisData.value.barData.push(resData?.tddyList)
      landFinancialAnalysisData.value.barData.push(resData?.tdjrList)
      landFinancialAnalysisData.value.barData.push(resData?.tdzjhList)
    } else {
      landFinancialAnalysisData.value.xAxisData = []
      landFinancialAnalysisData.value.barData = []
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (landFinancialAnalysisData.value.xAxisData?.length) landFinancialAnalysisRef.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'landFinancialAnalysis') {
      dialogRef.value.updateChart();
    }
  })
}

const changeCity = (cityCode, type) => { // 模块切换城市
  switch (type) {
    case 'landSupplyStatistics': // 土地供应情况统计
      cityConfig.value.landSupplyStatistics = cityCode
      getLandSupplyStatistics(cityCode)
      break;
    case 'landIncome': // 国有土地使用权出让收入情况
      getLandIncome(cityCode)
      break;
    case 'landPriceMonitoringAnalysis': // 住宅地价监测分析
      cityConfig.value.landPriceMonitoringAnalysis = cityCode
      getLandPriceMonitoringAnalysis(cityCode)
      break;
    case 'landTransactionCondition': // 各类型土地成交情况分析
      getLandTransactionCondition(cityCode)
      break;
    case 'residentiaLandAbnormalTransactionCondition': // 住宅用地异常交易情况
      cityConfig.value.residentiaLandAbnormalTransactionCondition = cityCode
      getResidentiaLandAbnormalTransactionCondition(cityCode)
      break;
    case 'landFinancialAnalysis': // 土地金融分析
      getLandFinancialAnalysis(cityCode)
      break;
  }
}

const changeLandSupplyStatisticsDataTab = (item) => { // 土地供应情况统计-切换tab
  getLandSupplyStatistics() // 土地供应情况统计
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '210000' : data.cityCode;
  cityConfig.value.landSupplyStatistics = cityObj.value.code
  cityConfig.value.landIncome = cityObj.value.code
  cityConfig.value.landPriceMonitoringAnalysis = cityObj.value.code
  cityConfig.value.landTransactionCondition = cityObj.value.code
  cityConfig.value.residentiaLandAbnormalTransactionCondition = cityObj.value.code
  cityConfig.value.landFinancialAnalysis = cityObj.value.code

  mapList.value.forEach(x => {
    if (x.code === data.cityCode) {
      x.selected = true
      if (data.cancelCurrentCity) {
        x.selected = false
      }
    } else {
      x.selected = false
    }
  })

  initPage(cityObj.value.code);
}

const submitFiltrateYear = (yearType) => { // 各城市国有土地使用权出让收入占全省比重变化情况-年范围筛选
  if (landIncomeProportionOfProvinceData.value.startYear && landIncomeProportionOfProvinceData.value.endYear) {
    initLandIncomeProportionOfProvince()
    landIncomeProportionOfProvinceRef.value.updateChart();
  }
};

const startYearPickerOptions = (time) => { // 各城市国有土地使用权出让收入占全省比重变化情况-年范围筛选-开始年份禁用校验
  const year = time.getFullYear();
  if (landIncomeProportionOfProvinceData.value.endYear) {
    return year > Number(landIncomeProportionOfProvinceData.value.endYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

const endYearPickerOptions = (time) => { // 各城市国有土地使用权出让收入占全省比重变化情况-年范围筛选-结束年份禁用校验
  const year = time.getFullYear();
  if (landIncomeProportionOfProvinceData.value.startYear) {
    return year < Number(landIncomeProportionOfProvinceData.value.startYear) || year > currentYear.value;
  } else {
    return year > currentYear.value;
  }
};

const publicChangeFiltrateTime = (data, {time, type}) => { // 住宅用地异常交易情况-顶部筛选数据处理
  switch(type) {
    case 'month':
      data.type = 1
      data.startTime = time
      data.endTime = ''
      break;
    case 'year':
      data.type = 2
      data.startTime = time
      data.endTime = ''
      break;
    default: // monthRange
      data.type = 3
      data.startTime = time[0]
      data.endTime = time[1]
      break;
  }
}

const residentiaLandAbnormalTransactionConditionChangeFiltrateTime = (item) => { // 住宅用地异常交易情况-顶部城市时间筛选
  publicChangeFiltrateTime(residentiaLandAbnormalTransactionData.value, item);
  getResidentiaLandAbnormalTransactionCondition(cityConfig.value.residentiaLandAbnormalTransactionCondition)
}

const fullSc = (componentName, componentParams, moduleName) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.moduleName = moduleName;
  switch (componentName) {
    case 'lineBarLandSupplyStatistics': // 土地供应情况统计-line&bar图
    case 'lineBarLandIncome': // 国有土地使用权出让收入情况-line&bar图
      magnifyData.value.props = {
        lineBarData: componentParams,
        class: componentName === 'lineBarLandSupplyStatistics' ? 'h266 dialog-h266' : 'h256 dialog-h256'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barSuperpositionProvinceProportion': // 各城市国有土地使用权出让收入占全省比重变化情况-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h266 dialog-h266'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'lineBarLandPriceMonitoringAnalysis': // 住宅地价监测分析-line&bar图
      magnifyData.value.props = {
        lineBarData: componentParams,
        class: 'h218 dialog-h218'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barSuperposition': // 各类型土地成交情况分析/土地金融分析-bar图
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h256 dialog-h256'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'pie': // 住宅用地异常交易情况-pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h276 dialog-h276'
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
}

const dialogEmit = ({type, value}) => { // dialog的v-on
  switch(type) {
    case 'landSupplyStatistics': // dialog-土地供应情况统计-chart图
      landSupplyStatisticsData.value.xAxisTimeType = value
      break;
    case 'landIncome': // dialog-国有土地使用权出让收入情况-chart图
      landIncomeData.value.xAxisTimeType = value
      break;
    case 'landPriceMonitoringAnalysis': // dialog-住宅地价监测分析-chart图
      landPriceMonitoringAnalysisData.value.xAxisTimeType = value
      break;
    case 'landTransactionCondition': // dialog-各类型土地成交情况分析-chart图
      landTransactionConditionData.value.xAxisTimeType = value
      break;
    case 'landFinancialAnalysis': // dialog-土地金融分析-chart图
      landFinancialAnalysisData.value.xAxisTimeType = value
      break;
  }
}

const handleCityPermission = (cityCode) => { // 处理城市权限
  if (cityCode) {
    cityObj.value.code = cityCode
    Object.keys(cityConfig.value).forEach(x => {
      cityConfig.value[x] = cityCode
    })
  }
  if (cityCode !== '210000') { // 单市
    cityObj.value.name = mapList.value.find(x => x.code === cityCode)?.name
    mapList.value.forEach(x => {
      if (x.code === cityCode) {
        x.selected = true
      } else {
        x.select.disabled = true
      }
    })
  }
}

const changeLandSupplyStatisticsType = (res) => { // 土地供应情况统计-select-下拉
  getLandSupplyStatistics(cityConfig.value.landSupplyStatistics)
}

const changeLandPriceMonitoringAnalysisType = (res) => { // 住宅地价监测分析-select-下拉
  getLandPriceMonitoringAnalysis(cityConfig.value.landPriceMonitoringAnalysis)
}

const initPage = (cityCode) => {
  getLandSupplyStatistics(cityCode) // 土地供应情况统计
  getLandIncome(cityCode) // 国有土地使用权出让收入情况
  getLandPriceMonitoringAnalysis(cityCode) // 住宅地价监测分析
  getLandTransactionCondition(cityCode) // 各类型土地成交情况分析
  getResidentiaLandAbnormalTransactionCondition(cityCode) // 住宅用地异常交易情况
  getLandFinancialAnalysis(cityCode) // 土地金融分析
}

onBeforeMount(() => {
  const permissionCityCode = localStorage.getItem('cityCode')
  if (permissionCityCode) handleCityPermission(permissionCityCode)
})

onMounted(() => {
  currentYear.value = new Date().getFullYear();
  landIncomeProportionOfProvinceData.value.endYear = currentYear.value.toString() // 各城市国有土地使用权出让收入占全省比重变化情况-年范围筛选
  landIncomeProportionOfProvinceData.value.startYear = (currentYear.value - 4).toString() // 各城市国有土地使用权出让收入占全省比重变化情况-年范围筛选
  residentiaLandAbnormalTransactionData.value.startTime = (currentYear.value - 1).toString() // 住宅用地异常交易情况-默认年份
  initLandIncomeProportionOfProvince() // 各城市国有土地使用权出让收入占全省比重变化情况
  initPolicyList() // 政策列表
  initPage(cityObj.value.code)
})
</script>

<style scoped lang="less">
.common-module-bg {
  background-image: url("@/assets/img/landComprehensiveAnalysis/module-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 93px;
    margin-bottom: 22px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 42px;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    position: relative;
    span {
      margin-top: 5px;
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .pubilc-chart-title {
      font-size: 18px;
      font-weight: bold;
      position: relative;
      left: 30px;
      top: 15px;
    }

    .land-supply-statistics-btns {
      position: absolute;
      right: 100px;
      top: 60px;

      :deep(.el-tabs) {
        display: flex;
        align-items: center;

        .el-tabs__header {
          margin: 0;
        }

        .el-tabs__nav-wrap:after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          text-align: center;
          padding: 0 10px;
          font-size: 12px;
          height: 20px;
          box-shadow: inset 0px 0px 8px 0px #3D7FFF;
          border-radius: 8px;
          cursor: pointer;
          color: white;
        }

        .el-tabs__item:not(:last-child) {
          margin-right: 5px;
        }

        .el-tabs__item.is-active {
          background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
        }
      }
    }

    .module-left {
      .land-supply-statistics {
        position: relative;
        padding: 0 10px 10px;
        .common-module-bg;

        .filtrate-city {
          top: 12px;
        }

        &-select {
          position: absolute;
          right: 95px;
          top: 12px;
          width: 120px;
          z-index: 1;
        }
      }

      .land-income {
        position: relative;
        margin-top: 10px;
        padding: 0 10px 10px;
        .common-module-bg;

        .filtrate-city {
          top: 12px;
        }
        .chart {
          margin-top: 10px;
        }
      }

      .land-income-proportion-of-province {
        position: relative;
        margin-top: 10px;
        padding: 0 10px 10px;
        box-sizing: border-box;
        .common-module-bg;

        &-year-range {
          position: absolute;
          right: 10px;
          top: 15px;
          display: flex;
          align-items: center;
          z-index: 1;

          &-item {
            display: flex;
            align-items: center;

            /deep/ .el-input__wrapper {
              background: #204485;
              .el-input__inner {
                color: white;
              }
            }
          }
          :deep(.el-date-editor) {
            width: 80px;
            opacity: 1;
          }
        }
      }
    }

    .middle-map {
      height: 400px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }
    }

    .table-list {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 258px;
      box-sizing: border-box;
      background: url("@/assets/img/landComprehensiveAnalysis/module-bg-without-title.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px;
      margin-top: 10px;
    }

    .residential-land-price-monitoring-analysis {
      margin-top: 10px;
      position: relative;
      padding: 0 10px 0px;
      .common-module-bg;

      .pubilc-chart-title {
        top: 9px;
      }

      .filtrate-city {
        top: 7px;
      }

      &-select {
        position: absolute;
        right: 95px;
        top: 7px;
        width: 120px;
        z-index: 1;
      }
    }

    .residential-land-abnormal-transaction-condition {
      margin-top: 10px;
      position: relative;
      padding: 0 10px 0px;
      .common-module-bg;

      .residential-land-abnormal-transaction-condition-filtrate {
        position: absolute;
        right: 15px;
        top: 0;
        display: flex;
        align-items: center;
        z-index: 1;
        .filtrate-city {
          position: relative;
          right: 0;
        }
        .filtrate-module {
          position: relative;
          margin-left: 10px;
          top: 15px;
        }
      }
      .residential-land-abnormal-transaction-condition-chart {
        display: flex;
        align-items: center;
        > div {
          width: 50%;
        }
      }
    }

    .land-transaction-condition, .land-financial-analysis {
      position: relative;
      padding: 0 10px 10px;
      .common-module-bg;

      .chart {
        margin-top: 10px;
      }
    }

    .land-financial-analysis {
      margin-top: 10px;
    }
  }
}
.h300 {
  height: 300px;
}
.h242 {
  height: 242px;
}
/*---自定义element布局样式-start--*/
.el-col-9 {
  max-width: 35%;
  flex: 0 0 35%;
}
.el-col-6 {
  max-width: 30%;
  flex: 0 0 30%;
}
/*---自定义element布局样式-end--*/

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}

/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
</style>

<style lang="less">
.land-income-proportion-of-province-year-range-item-popper {
  .el-year-table td.disabled .cell {
    background-color: #6969694f !important;
    color: #ffffff47 !important;
  }
}
</style>